page-own-plug-dashboard {
    .content {
        background: radial-gradient(circle, #61B4FA, #389BEE, #0076D9);
        color: #ececec;
    }
    .off {
        background: #B5B5B5;
        .selected {
            .icon {
                box-shadow: 3px 0 10px #898989 !important;
                background-color: #FFF !important;
                color: #898989 !important;
            }
        }
        .plug {
            border: 1px solid #898989 !important;
        }
        [socket] {
            background: #595959 !important;
        }
        .switch {
            border: 1px solid #898989 !important;
            background: #C4C4C4;
            color: #767676;
        }
    }
    .btn-gounp {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        padding-bottom: 10px;
        [btn] {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin: 0 10px;
            .icon {
                margin-bottom: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 25px;
                height: 45px;
                width: 45px;
                border: 1px solid #FFF;
                border-radius: 50%;
            }
        }
        .selected {
            .icon {
                box-shadow: 3px 0 10px #3683DE;
                background-color: #65A8F6;
                color: #fff;
            }
        }
    }
    [item] {
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        color: #3C3C3C;
    }
    .switch-tab .plugbox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 50vh;
        transition: all 0.5s;
        .power {
            font-size: 17px;
            margin-bottom: 5vh;
        }
        .plug {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 29vh;
            width: 29vh;
            border: 1px solid #FFF;
            border-radius: 50%;
        }
        [socketbox] {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            width: 100%;
        }
        [socketbox1] {
            margin-bottom: 2.5vh;
        }
        [socketbox2] {
            margin-top: 2.5vh;
        }
        [socket] {
            height: 5vh;
            width: 1.5vh;
            background: #fff;
        }
        [socket1] {
            margin: 0 2vh 0 2vh;
        }
        [socket2] {
            transform: rotate(-30deg);
            margin: 0 4vh 0 0;
        }
        [socket3] {
            transform: rotate(30deg);
            margin: 0 0 0 4vh;
        }
    }
    .switchbox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
        .switch {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35px;
            height: 65px;
            width: 65px;
            border: 1px solid #FFF;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
        }
    }
    .timing-tab {
        height: 85%;
        padding: 0 15px;
        ion-scroll {
            height: 100%;
            .scroll-content {}
        }
        [height20] {
            height: 20vh;
        }
        [timing-item] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            height: 100px;
            padding: 10px 15px;
            position: relative;
            [action] {
                position: absolute;
                top: 10px;
                color: #959595;
            }
            [clock] {
                font-size: 30px;
            }
            [day] {
                font-size: 12px;
                position: absolute;
                bottom: 10px;
                color: #959595;
            }
        }
        ion-toggle {
            width: 44px !important;
            height: 25px !important;
            .toggle-inner {
                width: 21px !important;
                height: 21px !important;
                box-shadow: 0 0px 5px rgba(0, 0, 0, 0.3) !important;
                ;
            }
        }
        .add-btn {
            z-index: 9;
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -32.5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 45px;
            width: 65px;
            height: 65px;
            border-radius: 50%;
            background-color: #D4EBFF;
            color: #0076D9;
        }
    }
    .timebox {
        margin-top: 5px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        font-size: 20px;
        height: 50px;
    }
    .countdown-tab {
        padding: 0 15px;
        display: flex; // justify-content: center;
        flex-direction: column;
        align-items: center;
        .countdownbox {
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        [clock] {
            font-size: 45px;
        }
        [action] {
            font-size: 15px;
        }
        .btns {
            display: flex;
            align-items: center;
            margin-top: 20px;
            [btn] {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                width: 65px;
                height: 65px;
                border-radius: 50%;
                color: #fff;
                transition: all 0.3s;
            }
            .start {
                background-color: #1AA717;
            }
            .pause {
                background-color: #FBA613;
                margin-left: 75px;
            }
            .continue {
                background-color: #389BEE;
                margin-left: 75px;
            }
            .cancel {
                background-color: #D61313;
                margin-right: 75px;
            }
        }
        .arrow {
            color: #D8D8D8;
        }
    }
    .loop-tab {
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .loopbox {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 200px;
            .loopitem {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                [clock] {
                    font-size: 30px;
                }
                [action] {
                    font-size: 15px;
                }
            }
        }
        .exchange {
            font-size: 25px;
            margin: 20px;
        }
    }
    .chart-tab {
        .chart {
            width: 100vw;
            height: 50vh;
            background: rgba(255, 255, 255, 0.2);
        }
    }
}